import 'package:flutter/material.dart';
import 'package:ft_web/config.dart';
import 'package:ft_web/util/screen_util.dart';

class WebHeader extends StatefulWidget {
  WebHeader({Key key}) : super(key: key);

  @override
  _WebHeaderState createState() => _WebHeaderState();
}

class _WebHeaderState extends State<WebHeader> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      width: double.infinity,
      color: Colors.black,
      height: 50.w,
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Image.asset('assets/images/logo.png'),
          Row(
            children: [
              TitleButton(title: '首页',),
              TitleButton(title: '关于我们',),
              TitleButton(title: '产品介绍',),
              TitleButton(title: '加入我们',),
              TitleButton(title: '招商加盟',)
              
            ],
          )
        ],
       ),
    );
  }
}


class TitleButton extends StatefulWidget {
  final Color normalColor;
  final Color highlightColor;
  final String title;
  final double fontSize;
  final bool isSeleted;
  const TitleButton({Key key, this.normalColor = Colors.white, this.highlightColor = ColorConfig.theamColor, this.isSeleted = false, this.title = '', this.fontSize =  12}) : super(key: key);

  @override
  _TitleButtonState createState() => _TitleButtonState();
}

class _TitleButtonState extends State<TitleButton> {
  
  bool _isHighlight = false;
  @override
  Widget build(BuildContext context) {
    return Container(
      child: MouseRegion(
        onEnter: (event) {
          setState(() {
            _isHighlight = true;
          });
        },
        onHover: (event) {
          
        },
        onExit: (event) {
          setState(() {
            _isHighlight = false;
          });
        },
        child: TextButton(
          onPressed: (){}, 
          style: ButtonStyle(
            padding: MaterialStateProperty.all(EdgeInsets.symmetric(vertical: 5.w,horizontal: 15.w)),
            minimumSize: MaterialStateProperty.all(Size(10.w, 10.w)),
          ),
          child: Text(
            widget.title,
            style: TextStyle(
              fontSize: widget.fontSize,
              color: widget.isSeleted?widget.highlightColor:(_isHighlight?widget.highlightColor:widget.normalColor)
            ),
          ),
        ),
      ),
    );
  }
}